/* 右侧控制面板区域
 * index.js
 */
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';

//组件
import BlankTab from './BlankTab.jsx';
import EditTab from './ComEditTab.jsx';
import SurfaceTab from './ComSurfaceTab.jsx';
import AnimationTab from './ComAnimationTab.jsx';
import EventTab from './ComEventTab.jsx';
import PageAnimationTab from './PageAnimationTab.jsx';
import PageSurfaceTab from './PageSurfaceTab.jsx';

//右侧栏目
class RightTabs extends Component{
	constructor(props){
		super(props);
		this.state={editableActive:true,surfaceActive:false,animationActive:false,eventActive:false};
	}

	componentDidMount(){
		$('.imgBtn').popup({
    		popup : $('#imgPopup'),
    		on   : 'click'
  		});
  	}
	
	tabClick(name){
		const newState=Object.assign({editableActive:false,surfaceActive:false,animationActive:false,eventActive:false}, {[name]:true}); 
		this.setState(newState);
	}

	render(){
		const dataProps={
			currentComp:this.props.currentComp,
			setSelectComp:this.props.setSelectComp,
			dispatch:this.props.dispatch,
			pageId:this.props.pageId,
			page:this.props.page,
			h5Data:this.props.h5Data
		}

		let tabContent=(<span></span>);
		let overflowy={};
		if(this.state.editableActive){
			if(this.props.currentComp.get('id')==null)
				tabContent=(<BlankTab />);
			else
				tabContent=(<EditTab {...dataProps} />);
		}else if(this.state.surfaceActive){
			if(this.props.currentComp.get('id')==null)
				tabContent=(<PageSurfaceTab {...dataProps} />);
			else{
				tabContent=(<SurfaceTab {...dataProps} />);
				overflowy={overflowY:'auto'};
			}
		}else if(this.state.animationActive){
			if(this.props.currentComp.get('id')==null)
				tabContent=(<PageAnimationTab {...dataProps} />);
			else{
				tabContent=(<AnimationTab {...dataProps} />);
				overflowy={overflowY:'auto'};
			}
		}else if(this.state.eventActive){
			if(this.props.currentComp.get('id')==null)
				tabContent=(<BlankTab />);
			else
				tabContent=(<EventTab {...dataProps} />);
		}
		
		return(
		  	<aside className="edit-right-handles">
			  	<div className="ui top attached tabular menu">
			  		<a className={this.state.editableActive?"item active":"item"} onClick={this.tabClick.bind(this,'editableActive')}>编辑 </a>
			  		<a className={this.state.surfaceActive?"item active":"item"} onClick={this.tabClick.bind(this,'surfaceActive')}>外观 </a>
			  		<a className={this.state.animationActive?"item active":"item"} onClick={this.tabClick.bind(this,'animationActive')}>动画 </a>
			  		<a className={this.state.eventActive?"item active":"item"} onClick={this.tabClick.bind(this,'eventActive')}>事件 </a>
				</div>
				<div className="ui bottom attached rightTab active" style={overflowy}>
					{tabContent}
				</div>
			</aside>
		);
	}
}

export default connect((state,ownProps)=>{
	const page=state.app.h5Reducer.data.pages.get(ownProps.pageId);//当前活动页面
	let currentComp=Immutable.Map();
	if(ownProps.selComp.get('id')){
		const id=ownProps.selComp.get('id');
		currentComp=page.get("components").get(id);
	}
	return {
		h5Data:state.app.h5Reducer.data,
		page:page,
		currentComp:currentComp
	};

})(RightTabs);

